<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document&Window</title>
    <style>
        div{
            background-color: aquamarine;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head>
<body>


<p id="world" onmouseover=changeWorld() onmouseleave=resetWorld()>Hello world!</p>
<p id="resize"></p>
输入:<input type="text" id="fname" onchange="changeUpperCase()">
<br>
<button id="clickme">点我</button>
<p id="sum"></p>

<div id="div1">
    <p id="p1">我是冒泡</p>
</div>

<div id="div2">
    <p id="p2">我是捕获</p>
</div>
<button id="b2">点我,点我就不警告了</button>
<br>
<button onclick="resizeWindow(200,500)">点我改变大小</button>
<br>
<button onclick="assignNew()">加载新的文档</button>
<br>
<p id="example"></p>
<br>
<p id="time"></p>
<button onclick="setCookie('username','Jack',3)">添加cookies</button>
<button onclick="getCookie()">显示cookies</button>
<button onclick="getCookieValue('username')">获取cookies值</button>
<button onclick="removeCookie()">删除cookies</button>
<script>
    function changeWorld() {
        document.getElementById("world").innerHTML = "Hello world!  I'm coming"
        document.getElementById("world").style.color = "red"
    }
    function resetWorld() {
        document.getElementById("world").innerHTML = "Hello world!"
        document.getElementById("world").style.color = "black"
    }
    function changeUpperCase() {
        var x = document.getElementById("fname")
        x.value = x.value.toUpperCase()
    }
    document.getElementById("world").addEventListener("click",function () {
        alert("Hello man!")
    })
    window.addEventListener("resize",function () {
        document.getElementById("resize").innerHTML=Math.random()
    })
    document.getElementById("clickme").addEventListener("click",function () {
        sumFunction(2,3)
    })
    function sumFunction(a,b){
        document.getElementById("sum").innerHTML=a+b
    }

    document.getElementById("div1").addEventListener("click",function () {
        alert("你点击了div1")
    },false)
    document.getElementById("p1").addEventListener("click",function () {
        alert("你点击了p1")
    },false)
    function clickDiv2 () {
        alert("你点击了div2")
    }
    function clickp2 () {
        alert("你点击了p2")
    }
    document.getElementById("div2").addEventListener("click",clickDiv2,true)
    document.getElementById("p2").addEventListener("click",clickp2,true)
    document.getElementById("b2").addEventListener("click",function () {
        document.getElementById("div2").removeEventListener("click",clickDiv2,true)
        document.getElementById("p2").removeEventListener("click",clickp2,true)
    })

    var para = document.createElement("p")
    var node = document.createTextNode("This's a new node")
    para.appendChild(node)
    var element = document.getElementById("div2")
    element.appendChild(para)
    var child = document.getElementById("p2")
    element.removeChild(child)
    para.parentNode.removeChild(para)

    document.write("window的宽"+innerWidth+"<br>")
    document.write("window的高"+innerHeight+"<br>")

    function resizeWindow(a,b) {
        window.resizeTo(a,b)
    }

    document.write(location.href+"<br>")
    document.write(location.hostname+"<br>")
    document.write(location.port+"<br>")
    document.write(location.protocol+"<br>")
    document.write(location.pathname+"<br>")
    function assignNew() {
        window.location.assign("http://www.w3cschool.cn")
    }

    txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
    txt+= "<p>Browser Name: " + navigator.appName + "</p>";
    txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
    txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>Platform: " + navigator.platform + "</p>";
    txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
    txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;

    var add = (function () {
        var text = "hello<br>"
        return function () {
            return text += "hello<br>"
        }
    })()
    var myVar=setInterval(function () {
        var p = document.getElementById("time")
        p.innerHTML = add()
    },3000)
    setTimeout(function () {
        clearInterval(myVar)
    },9000)

    function setCookie(cname,cvalue,exdays) {
        var d = new Date()
        d.setTime(d.getTime()+(exdays*24*60*60*1000))
        var expires = "expires="+d.toDateString()
        document.cookie = cname+"="+cvalue+";"+expires
    }
    function getCookie() {
        alert(document.cookie)
    }
    function getCookieValue(cname) {
        var name = cname+"="
        var ca = document.cookie.split(";")
        for(var i=0;i<ca.length;i++){
            var c = ca[i].trim()
            alert(c.substring(name.length,c.length))
        }
        return ""
    }
    function removeCookie() {
        var date = new Date(1970,1,1,00,00,00)
        document.cookie = "username=;expries="+date.toDateString()
    }
</script>


</body>
</html>